<script setup lang="ts">
import {UserModel} from "@/interfaces/apiResponse.ts";
const userInfo:UserModel = myLocalStore().get('userInfo');
const user = ref<UserModel>(userInfo);
</script>

<template>
  <main class="member">
    <div class="left">
      <el-avatar shape="square" :size="180" :src="user?.avatar" />
      <router-link :to="{name:'member.me'}" :class="{active:$route.name == 'member.me'}">
        修改昵称
      </router-link>
      <router-link :to="{name:'member.avatar'}" :class="{active:$route.name == 'member.avatar'}">
        修改头像
      </router-link>
    </div>
    <div class="right">
      <el-card>
        <template #header>
          修改头像
        </template>
        <my-upload-file v-model="user.avatar"/>
      </el-card>
    </div>
  </main>
</template>

<style lang="scss" scoped>
main.member{
  @apply min-h-screen grid grid-cols-12 border border-slate-300 rounded;
  div.left{
    @apply col-span-2 p-3 border-r border-rose-950 bg-slate-800
    flex flex-col justify-start items-center;
    a{
      @apply bg-slate-100 w-full mt-2 rounded p-2 text-sm text-center hover:bg-slate-300 duration-300
      text-slate-800;
      &.active{
        @apply bg-green-600 text-slate-100;
      }
    }
  }
  div.right{
    @apply col-span-10;
  }
}
</style>